<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="额度转化" titleTintColor="#fff">
			<text slot="back" class="iconfont">&#xe63d;</text>
			<text slot="iconfont" @click="onRefresh()" class="iconfont" style="font-size:50rpx">&#xe64c;</text>
		</navigation>
		<view class="q-p-header">
			<view class="q-p-header-item">
				<view style="margin-bottom: 8rpx;padding-top: 16rpx;">
					<text class="iconfont" style="font-size: 60rpx; color: #d81e06; margin-right: 8rpx;">&#xe64a;</text>
					<span
						@click="toAccountrecharge()"
						style="position: absolute;right: 0px; padding: 0px 40rpx;padding: 8rpx 12rpx;border: 2px solid #ff0000;color: #203864;border-radius: 8px; line-height: 34rpx;"
					>
						充值
					</span>
				</view>
			</view>
			<view class="q-p-header-item">
				<span style="width: 160rpx; display: inline-block;">总资产</span>
				<span class="q-p-header-item-val">
					<text class="iconfont" style="font-size: 36rpx; color: #efb336; margin-right: 8rpx;">&#xe651;</text>
					{{ totalBalance }}
				</span>
			</view>
			<view class="q-p-header-item">
				<span style="width: 160rpx; display: inline-block;">{{ firstName }}</span>
				<span class="q-p-header-item-val">
					<text class="iconfont" style="font-size: 36rpx; color: #efb336; margin-right: 8rpx;">&#xe651;</text>
					{{ firstBalance }}
				</span>
			</view>
			<view class="q-p-header-item">
				<span style="width: 160rpx; display: inline-block;">{{ secondName }}</span>
				<span class="q-p-header-item-val">
					<text class="iconfont" style="font-size: 36rpx; color: #efb336; margin-right: 8rpx;">&#xe652;</text>

					{{ secondBalance }}
				</span>
			</view>
		</view>

		<view class="q-p-input">
			<view class="q-p-i-money" style="font-size: 16px; color: #333;">金额(元)</view>
			<view class="q-p-i-input">
				<view style="flex:260;">
					<input v-model="inputVal" class="uni-input" style="border: 1px solid #E8E9EC;  padding-left: 40rpx; height:80rpx;" placeholder="请输入正整数的金额" />
				</view>
				<view style="flex: 80; text-align: right;" @click="onInputMax()"><span class="q-p-i-input-btn">最大</span></view>
			</view>
		</view>

		<view class="q-p-group-btn">
			<view class="p-p-g-btn">
				<view class="p-p-btn-c" style="background: #ffcccc;border-radius: 5px; color: #000;">
					<picker class="pick" @change="bindLeftPlatformPicker" :value="firstID" :range="gamePickName">
						<text class="uni-input">{{ gamePickName[firstID] }}</text>
					</picker>
				</view>
			</view>
			<view class="p-p-g-btn">
				<view class="p-p-btn-c" style="background: #f4f7ff;border-radius: 5px; color: #000;" @click="openPicker('two')">
					<picker class="pick" @change="bindRightPlatformPicker" :value="secondID" :range="gamePickName">
						<text class="uni-input" v-if="secondID == -1">{{ secondName }}</text>
						<text class="uni-input" v-if="secondID != -1">{{ gamePickName[secondID] }}</text>
					</picker>
				</view>
			</view>
			<view class="p-p-g-btn"><view class="p-p-btn-c bg" style="color: #fff;border-radius: 5px;" @click="onTrans()">立即转账</view></view>
			<view class="p-p-g-btn"><view class="p-p-btn-c bg" style=" color: #fff; border-radius: 5px;" @click="onRecycle()">一键回收</view></view>
		</view>

		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { Tabbar, navigation },
	data() {
		return {
			balance: '0', //万漉会的余额
			lockMoney: '0', //冻结的余额
			listInfo: [], //不同游戏名称对应的余额值
			gameName: [], //获取游戏的名称
			gamePickName: [], //选择项的数据
			isShowBtnGroup: false,
			totalBalance: '0',
			firstName: '万漉会',
			firstID: 0,
			firstPlatformId: '0', //左边平台的平台id
			firstBalance: '0',
			secondName: '请选择',
			secondID: -1,
			secondPlatformId: '0', //右边平台的平台id
			secondBalance: '0',

			inputVal: '' //表单中输入的值
		};
	},
	onLoad() {
		if (!Config.is3rd) {
			this.goBackPage();
			return;
		}
		let that = this;
		that.$store.commit('isTestPlay');
		if (that.$store.state.isTestPlay) {
			VueTools.toastNo('试玩账号不能进入');
			this.goBackPage();
		} else {
			this.getBlanceMoney();
			this.getSelectOption();
		}
	},
	methods: {
		/**
		 * 额度刷新
		 */
		onRefresh() {
			this.inputVal = '';
			this.getBlanceMoney(true);
		},
		/**
		 * 跳转到充值
		 */
		toAccountrecharge() {
			this.navigateToSigleUrl('/pages/recharge/accountrecharge/accountrecharge');
		},
		/**
		 * 确认输入最大的金额
		 */
		onInputMax() {
			this.inputVal = this.getMaxUserBalance() + '';
		},
		/**
		 * 立即转账
		 */
		onTrans() {
			if ((this.firstPlatformId == '0' && this.secondPlatformId == '0') || this.firstPlatformId == this.secondPlatformId) {
				VueTools.toastNo('请选择两个不同的平台');
				return;
			}
			if (!Tools.isNumber(this.inputVal) || Tools.isEmpty(this.inputVal) || this.inputVal == '0') {
				VueTools.toastNo('需输整数');
				return;
			}
			if (parseInt(this.inputVal) > this.getMaxUserBalance()) {
				VueTools.toastNo('目标账户余额不足');
				return;
			}
			let that = this;
			let obj = '{"fromPlatformId":"' + this.firstPlatformId + '","toPlatformId":"' + this.secondPlatformId + '","money":"' + parseInt(this.inputVal) + '"}';
			Net.ayiHttp(
				URL.THIRD_GAMETRANS,
				obj,
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.presentAlert('已转账' + parseInt(this.inputVal) + '元成功');
						console.log('转帐的数据返回的结果--', data);
						that.inputVal = '';
						that.getBlanceMoney();
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 一键回收
		 */
		onRecycle() {
			let that = this;
			uni.showModal({
				title: '是否一键回收?',
				content: '所有其它平台一起转账到万漉会',
				confirmColor: '#ff6565',
				success: function(res) {
					if (res.confirm) {
						that.recycleNet();
					}
				}
			});
		},
		recycleNet() {
			let that = this;
			Net.ayiHttp(
				URL.THIRD_ALLTRANS,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('其它平台转账到万漉会上面--', data);
						that.presentAlert('转账到万漉会共' + data.allCount + '元');
						that.inputVal = '';
						that.getBlanceMoney();
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		getMaxUserBalance() {
			let tempMoney = 0;
			for (let item in this.listInfo) {
				if ('' + this.firstID == this.listInfo[item]['platform_id'] + '') {
					tempMoney = parseInt(this.listInfo[item]['balance']);
					break;
				}
			}
			return tempMoney;
		},
		getPlatformBalance(platformId) {
			let tempMoney = 0;
			for (let item in this.listInfo) {
				if ('' + platformId == this.listInfo[item]['platform_id'] + '') {
					tempMoney = this.listInfo[item]['balance'];
					break;
				}
			}
			return tempMoney;
		},
		/**
		 * 获取余额的数据
		 */
		getBlanceMoney(isTip = false) {
			let that = this;
			Net.ayiHttp(
				URL.THIRD_SHOWTRANS,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('获取的余额数据--', data);
						that.balance = data.balance;
						that.firstBalance = data.balance;
						that.lockMoney = data.lock_money;
						that.listInfo = data.info;
						that.calcTotalBalance(data.info);
						if (isTip) {
							VueTools.toastNo('刷新余额成功');
						}
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		calcTotalBalance(balanceList) {
			let res = '0';
			for (let item in balanceList) {
				res = (parseFloat(res) + parseFloat(balanceList[item]['balance'])).toFixed(2);
			}
			this.totalBalance = res;
		},
		/**
		 * 获取游戏平台的名称
		 */
		getSelectOption() {
			let that = this;
			Net.ayiHttp(
				URL.THIRD_GETPLATFORMNAMES,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.gameName = [];
						that.gamePickName = [];
						if (!Tools.isEmpty(data) && data.length >= 1) {
							that.isShowBtnGroup = true;
							data.push({ id: '0', platform_name: '万漉会' });
							that.gameName = data;
							that.firstID = data.length - 1;
							for (let item in that.gameName) {
								that.gamePickName.push(that.gameName[item]['platform_name']);
							}
						}
						console.log('拼接后获取游戏平台的名称--', that.gameName);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		presentAlert(msg) {
			uni.showModal({
				title: '转账成功',
				content: msg,
				confirmColor: '#ff6565',
				showCancel: false,
				confirmText: '确定',
				success: function(res) {}
			});
		},
		/**
		 * 选择左边的平台
		 */
		bindLeftPlatformPicker(e) {
			this.firstID = e.target.value;
			this.firstName = this.gamePickName[this.firstID];
			this.firstPlatformId = this.gameName[this.firstID]['id'];
			this.firstBalance = this.getPlatformBalance(this.gameName[this.firstID]['id']);
		},
		/**
		 * 选择右边的平台
		 */
		bindRightPlatformPicker(e) {
			if (e.target.value == -1) {
				this.secondID = 0;
				this.secondName = this.gamePickName[0];
				this.secondPlatformId = this.gameName[0]['id'];
				this.secondBalance = this.getPlatformBalance(this.gameName[0]['id']);
				return;
			}
			this.secondID = e.target.value;
			this.secondName = this.gamePickName[this.secondID];
			this.secondPlatformId = this.gameName[this.secondID]['id'];
			this.secondBalance = this.getPlatformBalance(this.gameName[this.secondID]['id']);
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
//余额区域
.q-p-header {
	height: 300rpx;
	margin: 20rpx;
	background: #f4f7ff;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	padding: 0px 20rpx;
	.q-p-header-item {
		height: 80rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		border-top: 1px solid #e8e9ec;
		align-items: center;
		position: relative;
		&:first-child {
			border: none;
		}
		.q-p-header-item-val {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
}
//输入金额的区域
.q-p-input {
	height: 200rpx;
	margin: 20rpx;
	padding: 20rpx;
	background: #f4f7ff;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	.q-p-i-money,
	.q-p-i-input {
		height: 120rpx;
		flex: 1;
	}
	.q-p-i-input {
		display: flex;
		flex-direction: row;
		.q-p-i-input-btn {
			display: inline-block;
			padding: 8rpx 12rpx;
			border: 2px solid #ff0000;
			color: #203864;
			line-height: 34rpx;
			border-radius: 8px;
			margin-top: 12rpx;
			font-size: 28rpx;
		}
	}
}
//功能按钮组区域
.q-p-group-btn {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	bottom: 160rpx;
	width: 100%;
	.p-p-g-btn {
		width: 50%;
		height: 100rpx;
		text-align: center;
		line-height: 80rpx;
		cursor: pointer;
		font-size: 32rpx;
		.p-p-btn-c {
			margin: 20rpx;
			&.bg {
				background: linear-gradient(45deg, #fd4242, #a12424);
			}
		}
	}
}
</style>
